<template>
  <div class="t-c-page">
    <transition name="el-zoom-in-top">
      <el-form v-show="searchTagVisible" inline :model="searchTagFrom" ref="searchTagFrom" @keyup.enter.native="searchTagHandle">
        <el-form-item prop="word" label="标签名称">
          <el-input v-model="searchTagFrom.word" @clear="getTagApplyList" clearable placeholder="请输入标签名称" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :disabled="dataLoad" @click="searchTagHandle" type="primary" icon="el-icon-search">查询</el-button>
          <el-button :disabled="dataLoad" @click="resetTagPageHandle" plain icon="el-icon-refresh-right"
                     class="reset-menu">重置</el-button>
        </el-form-item>
      </el-form>
    </transition>

    <div class="t-tool">
      <el-button :disabled="dataLoad || tagApplyTableSelected.length === 0" @click="deleteTagHandle(true, undefined)"
                 type="danger" size="mini" plain icon="el-icon-delete"
                 class="reset-menu">删除标签</el-button>

      <right-tool-bar :search-visible="searchTagVisible"
                      @toggle-search="toggleSearch" @refresh-table="getTagApplyList" />
    </div>

    <el-table
      v-loading="dataLoad"
      :data="tagApplyList"
      @selection-change="selectionChangeHandle"
      ref="tagTable"
    >
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="name" header-align="center" align="center" label="标签名字"></el-table-column>
      <el-table-column prop="createTime" header-align="center" align="center" label="申请时间"></el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template v-slot="scope">
          <el-button type="text" size="small" @click="tagApplyOperationHandle(scope.$index, true)">同意</el-button>
          <el-button type="text" size="small" @click="tagApplyOperationHandle(scope.$index, false)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 表格分页插件 -->
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalNum"
      :disabled="dataLoad"
      layout="total, sizes, prev, pager, next, jumper"
      class="paging">
    </el-pagination>
  </div>
</template>

<script>
  import RightToolBar from '@/components/common/right-toolbar'

  export default {
    layout: 'admin',
    name: "admin-tag-check",
    components: { RightToolBar },
    data() {
      return {
        // 标签申请列表
        tagApplyList: [],
        // 标签申请表格被选中的‘行’数据
        tagApplyTableSelected: [],
        // 数据是否加载[false-不加载 true-加载]
        dataLoad: false,
        // 标签检索是否显示
        searchTagVisible: true,
        // 空间检索表单对象
        searchTagFrom: {
          word: '',           // 标签检索内容
        },
        // 当前展示页码
        pageIndex: 1,
        // 当前页显示个数
        pageSize: 10,
        // 当前博客数量
        totalNum: 0,
      }
    },
    // asyncData({ app, params, query}) {
    //   return app.$axios.$post('/blog/tag/apply/list', { page: 1, limit: 10 })
    //     .then(({ page }) => {
    //       return {
    //         tagApplyList: page.list,
    //         totalNum: page.totalNum
    //       }
    //     })
    //     .catch(() => {})
    // },
    created() {
      if (process.client) {

        this.getTagApplyList()
      }
    },
    methods: {
      // 标签检索事件
      searchTagHandle() {
        if (this.searchTagFrom.word === '') {
          return
        }
        this.getTagApplyList()
      },
      // 标签检索 显示/隐藏 事件
      toggleSearch() {
        this.searchTagVisible = !this.searchTagVisible
      },
      // 获取用户数据列表事件
      getTagApplyList() {
        let obj = {
          word: this.searchTagFrom.word,
          page: this.pageIndex,
          limit: this.pageSize
        }
        // 表格数据加载
        this.dataLoad = true
        this.$axios.$post('/blog/tag/apply/list', obj)
          .then(({ data:page }) => {
            this.tagApplyList = page.list
            this.totalNum = page.totalNum
          })
          .catch(() => {})
          .finally(() => {
            // 表格加载结束
            this.dataLoad = false
          })
      },
      // 每页显示个数变化事件
      sizeChangeHandle(size) {
        this.pageIndex = 1
        this.pageSize = size

        this.getTagApplyList()
      },
      // '点击特定页码'、'上一页'、'下一页'操作事件
      currentChangeHandle(index) {
        if (this.pageIndex === index) {
          return
        }
        this.pageIndex = index
        this.getTagApplyList()
      },
      // 用户表格行被选中事件
      selectionChangeHandle(data) {
        this.tagApplyTableSelected = data
      },
      // 同意用户标签申请
      tagApplyOperationHandle(index, bool) {
        index = (this.pageIndex - 1) * this.pageSize + index
        let name = this.tagApplyList[index].name
        let s = bool ? '同意' : '拒绝'
        this.$confirm('您确定' + s + '[' + name + ']标签吗？', s + '标签', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.$axios.$get('/blog/tag/check/opt', { params: { index, bool }})
            .then(() => {
              this.$notify({
                title: '操作成功',
                type: 'success',
                message: s + "[" + name + ']标签成功',
                offset: 100,
                duration: 2000
              });

              this.getTagApplyList()
            }).catch(() => {})
        }).catch(() => {})
      },
      deleteTagHandle() {

      },
      // 重置页面事件
      resetTagPageHandle() {
        if (this.searchTagFrom.word === '' && this.pageIndex === 1 && this.pageSize === 10) {
          return
        }

        this.$refs['searchTagFrom'].resetFields()    // 重置标签查询表单
        this.pageIndex = 1
        this.pageSize = 10

        this.getTagApplyList()
      }
    }
  }
</script>

<!--
  css字符对应
  c -> check
  t -> tag
-->
<style scoped>
  .t-c-page .t-tool {
    margin-bottom: 7px;
  }
  .t-c-page .paging {
    float: right;
    margin: 7px;
  }
</style>
